<!-- 网站建设 -->
<template>
    <div class="construct">
        <div class="banner">
            <img src="@/assets/image/construct/1.png" alt="">

            <div class="applet-descript">
                <div class="applet-content">
                    <div class="applet-content-title">微信小程序开发</div>
                    <div class="descript">
                        小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展
                    </div>

                    <div class="advantage">
                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/construct/2.png" alt="">
                            </div>
                            <div class="desc">企业官网</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/construct/3.png" alt="">
                            </div>
                            <div class="desc">外贸网站</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/construct/4.png" alt="">
                            </div>
                            <div class="desc">综合门户</div>
                        </div>

                        <div class="advantage-item">
                            <div class="img-box">
                                <img src="@/assets/image/construct/5.png" alt="">
                            </div>
                            <div class="desc">电商网站</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="service-project">
            <div class="construct-title bx">
                <div class="title">服务项目/SERVICE ITEMS</div>
                <div class="desc">百分百定制开发，一对一的专业设计，全程项目跟踪，瀚海黎明用专业和态度为您提供优质的服务！</div>
            </div>

            <div class="service-content bx">
                <div class="service-project-left">
                    <div v-for="item in 9" class="service-item">
                        <div class="img-box">
                            <img src="@/assets/image/construct/6.png" alt="">
                        </div>
                        <div class="main">
                            <div class="title">分析策划</div>
                            <div class="desc">结合品牌理念及品牌诉求编撰策划分析提案</div>
                        </div>
                    </div>
                </div>

                <div class="service-project-right">
                    <div class="title">安全防护</div>
                    <div class="desc">safety protection</div>

                    <div class="instructions">
                        智能实时防护，放DDOS,CC,DNS等攻击
                    </div>

                    <div class="img-box">
                        <img src="@/assets/image/construct/15.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="cooperation-process">
            <div class="construct-title bx">
                <div class="title">合作流程 / ONLINE TRANSLATION</div>
            </div>
            <div class="img-box bx">
                <img src="@/assets/image/construct/16.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Construct",
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
.construct {
    .banner {
        position: relative;

        img {
            width: 100%;
        }

        .applet-descript {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
            height: 100%;
            box-sizing: border-box;
            padding-left: 8vw;

            .applet-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .applet-content-title {
                    font-size: 2vw;
                    color: white;
                }

                .descript {
                    font-size: 1vw;
                    color: white;
                    margin: 2vw 0;
                    width: 50%;
                }

                .advantage {
                    display: flex;

                    .advantage-item {
                        margin-left: 1vw;
                        text-align: center;
                        font-size: .8vw;
                        color: white;

                        .img-box {
                            border: 1px solid #80B4AF;
                            padding: .3vw;
                            margin-bottom: .3vw;

                            img {
                                width: 2.5vw;
                                height: 2.5vw;
                            }
                        }
                    }
                }
            }
        }
    }

    .service-project {
        padding: 20px 0;

        .service-content {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;

            .service-project-left {
                width: 64%;
                display: flex;
                flex-wrap: wrap;
                margin-right: 5%;

                .service-item {
                    width: 32.33%;
                    display: flex;
                    align-items: center;
                    border: 1px solid #E5E5E5;
                    box-sizing: border-box;
                    margin: 0 calc(3% / 2) 15px 0;
                    padding: 12px 5px;

                    .img-box {
                        display: flex;
                        align-items: center;
                        width: 50px;
                        height: 50px;
                        overflow: auto;

                        img {
                            width: 100%;
                        }
                    }

                    .main {
                        box-sizing: border-box;
                        padding-left: 15px;

                        .title {
                            font-size: 14px;
                            color: #333333;
                        }

                        .desc {
                            font-size: 12px;
                            color: #6F6F6E;
                            margin-top: 5px;
                        }
                    }

                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }

            .service-project-right {
                width: 30%;
                border: 1px solid #E5E5E5;
                box-sizing: border-box;
                padding: 20px;

                .title,
                .desc,
                .instructions {
                    text-align: center;
                }

                .title {
                    font-size: 20px;
                }

                .desc {
                    color: #999999;
                    margin: 20px 0;
                }

                .instructions {
                    font-size: 14px;
                    color: #1A81BD;
                }

                .img-box {
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;

                    img {
                        width: 50%;
                    }
                }
            }
        }
    }

    .cooperation-process{
        padding: 20px 0;
        background: #f5f5f5;

        .img-box{
            margin: 40px auto;
            
            img{
                width: 100%;
            }
        }
    }

    .construct-title {
        text-align: center;

        .title {
            font-size: 20px;
        }

        .desc {
            font-size: 14px;
            color: #999999;
            margin-top: 15px;
        }
    }
}
</style>